<template>
  <el-dialog :visible.sync="visible"
             :title="!dataForm.id ? `${$t('add')}` : `${$t('update')}`"
             :close-on-click-modal="false"
             :append-to-body="true"
             :before-close="closeDialog"
             class="add-or-updata"
             width="35%"
             :close-on-press-escape="false">
    <el-form :model="dataForm"
             v-loading='dataListLoading'
             ref="dataForm"
             label-position="left"
             style="overflow: hidden;"
             @keyup.enter.native="dataFormSubmitHandle()"
             label-width="110px">
      <el-form-item label="名称"
                    prop="name"
                    :rules="stringRule(true, 2, 50)">
        <el-input v-model.trim="dataForm.name"
                  :placeholder="$t('menu.name')"></el-input>
      </el-form-item>
      <el-form-item label="HTTP地址"
                    :rules="stringRule(true, 2, 100)"
                    prop="httpAddress">
        <el-input v-model.trim="dataForm.httpAddress"
                  placeholder=""></el-input>
      </el-form-item>
      <el-form-item label=""
                    :rules="required()"
                    prop="singleSign">
        <el-radio-group v-model="dataForm.singleSign">
          <el-radio label="0">无需单点登录</el-radio>
          <el-radio label="1">finereport单点登录</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="URL参数字符串"
                    :rules="stringRule(false, 1, 300)"
                    prop="urlParam">
        <el-input v-model.trim="dataForm.urlParam"
                  placeholder="例如：/run/GoSpJkI2xdNq/r_5Juefss?cps=expand&rps=expand&nav=1&ha=0&la=0&fc=0&out=1&rt=1"></el-input>
      </el-form-item>
      <el-form-item label="排序"
                    prop="sort">
        <el-input-number v-model.trim="dataForm.sort"
                         controls-position="right"
                         :max="255"
                         :min="0"
                         class="width-100"
                         :label="$t('menu.sort')"></el-input-number>
      </el-form-item>
      <el-form-item label="图标"
                    prop="icon"
                    class="icon-list">
        <el-popover v-model.trim="iconListVisible"
                    ref="iconListPopover"
                    placement="bottom-start"
                    trigger="click"
                    popper-class="mod-sys__menu-icon-popover">
          <div class="mod-sys__menu-icon-inner">
            <div class="mod-sys__menu-icon-list">
              <el-button v-for="(item, index) in iconList"
                         :key="index"
                         @click="iconListCurrentChangeHandle(item)"
                         :class="{ 'is-active': dataForm.icon === item }">
                <svg class="icon-svg"
                     aria-hidden="true">
                  <use :xlink:href="`#${item}`"></use>
                </svg>
              </el-button>
            </div>
          </div>
        </el-popover>
        <el-input v-model.trim="dataForm.icon"
                  v-popover:iconListPopover
                  :readonly="true"
                  :placeholder="$t('menu.icon')"></el-input>
        <i class="el-icon-close menu-close"
           @click="menuClose"></i>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="primary"
                 :loading="isRequest"
                 @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
      <el-button @click="closeDialog">{{ $t('cancel') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import formValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
import FileUpload from '@/components/file-upload/file-upload'
import { getIconList } from '@/utils'
export default {
  mixins: [mixinViewModule, formValidate],
  components: {
    FileUpload
  },
  data () {
    return {
      visible: false,
      isRequest: false,
      iconList: [],
      iconListVisible: false,
      mixinViewModuleOptions: {
        addURL: '/system/sysPermission/addMenuLink', // 添加或修改的接口
        updateURL: '/system/sysPermission/updateMenuLink', // 添加或修改的接口
        getDataInfoURL: '/system/sysPermission/linkDetail?id=' // 获取详情的接口
      },
      deptListVisible: false,
      parentNameOptions: [],
      imgUrl: [],
      dataForm: {
        id: '',
        name: '',
        sort: 0,
        icon: '',
        urlParam: '',
        httpAddress: '',
        singleSign: '0'
      }
    }
  },
  computed: {
    isRequired () {
      return this.dataForm.type === '2'
    }
  },
  watch: {
    'dataForm.type' (val) {
      this.$refs['dataForm'].clearValidate()
    }
  },
  methods: {
    menuClose () {
      this.$set(this.dataForm, 'icon', '')
    },
    closeDialog () {
      this.$refs['dataForm'].resetFields()
      this.dataForm = Object.assign({}, {}, this.Initialization)
      this.visible = false
      this.isRequest = false
    },
    init (data) {
      data = data || {}
      this.dataForm.id = data.id
      this.dataForm.isShow = 0
      this.visible = true
      this.Initialization = JSON.parse(JSON.stringify(this.dataForm))
      this.$nextTick(() => {
        this.iconList = getIconList()
        if (this.dataForm.id) {
          // 获取信息
          this.getDataInfo()
        }
      })
    },
    // 图标, 选中
    iconListCurrentChangeHandle (icon) {
      this.dataForm.icon = icon
      this.iconListVisible = false
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          // this.dataForm.isShow = this.dataForm.isShow === 'true'
          const url = this.dataForm.id ? this.mixinViewModuleOptions.updateURL : this.mixinViewModuleOptions.addURL
          let params = {}
          params = Object.assign({}, {}, this.dataForm)
          this.addOrUpdateItem({ url, paramData: params }).then(res => {
            this.isRequest = false
            if (res.code !== 0) { return }
            this.$emit('callBack')
            this.closeDialog()
          })
        }
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">
.menu-close {
  position: absolute;
  top: 35%;
  right: 1%;
  cursor: pointer;
}

.mod-sys__menu {

  .menu-list,
  .icon-list {
    position: relative;

    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }

  &-icon-popover {
    width: 458px;
    overflow: hidden;
  }

  &-icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  &-icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;

    >.el-button {
      padding: 8px;
      margin: 8px 0 0 8px;

      >span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
}

.el-col .isUser .el-form-item__content {
  margin-left: 70px !important;
}
</style>
